<template>
<div>
  <div class="row-header">
    <el-button type="primary"  size="small" @click="toBack" icon="el-icon-back" style="margin-left: 20px">返回</el-button>
  </div>
  <div class="split-line"></div>
  <div class="row-main" style="display: flex; justify-content: center;align-items: center">
    <el-card style="width:700px;">
      <div slot="header" class="clearfix" style="text-align: center">
        <span>新增流量池</span>
      </div>
      <el-form :model="form" ref="form" :rules="formRules" label-width="150px" >
        <el-form-item label="流量池名称" prop="flowPoolName">
          <el-input size="small" style="width: 80%;" v-model="form.flowPoolName"></el-input>
        </el-form-item>
        <el-form-item label="所属运营商" prop="dictOperatorName">
          <el-select v-model="form.dictOperatorName" placeholder="请选择" style="width: 80%;" size="small">
            <el-option v-for="dictOperator in form.dictOperatorNameSelect" :key="dictOperator" :label="dictOperator" :value="dictOperator"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="a" label="共享套餐"  prop="singleCardMeal">
          <el-input size="small" v-model="form.singleCardMeal" style="width: 80%;" >
            <el-select class="isl" slot="append" size="small" v-model="form.unit" placeholder="单位">
              <el-option label="GB" value="G"></el-option>
              <el-option label="MB" value="M"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="所属通道"  prop="channelCompanyId">
          <el-select v-model="form.channelCompanyId" placeholder="请选择" style="width: 80%;" size="small">
            <el-option v-for="channelCompany in form.channelCompanyIdSelect" :key="channelCompany.id" :label="channelCompany.name" :value="channelCompany.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务号码开始号段"  prop="cardNumberStart">
          <el-input v-model.trim="form.cardNumberStart" type="number" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label="业务号码结束号段"  prop="cardNumberEnd">
          <el-input v-model.trim="form.cardNumberEnd" type="number" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="submitPrimaryFlowPoolHandle('form')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</div>
</template>

<script>
import { submitPrimaryFlowPool, getChannelcompanyForSelect } from '@/api/getData'

export default {
  name: 'AddPool',
  data() {
    return {
      unit: '',
      unitSelect: [
        {
          value: 'G',
          label: 'GB'
        },
        {
          value: 'M',
          label: 'MB'
        }
      ],
      fileRules: {
        file: [
          { required: true }
        ]
      },
      fileList: {
        file: ''
      },
      dictOperator: '',
      form: {
        flowPoolName: '',
        dictOperatorName: [],
        dictOperatorNameSelect: [],
        channelCompanyId: [],
        channelCompanyIdSelect: [],
        singleCardMeal: '',
        cardNumber: '',
        theoryFlow: '',
        containsFlow: '',
        virtualUsedFlow: '',
        fileName: '',
        file: '',
        unit:'G',
        cardNumberStart:'',
        cardNumberEnd:''
      },
      formRules: {
        flowPoolName: [
          { required: true, message: '请输入流量池名称', trigger: 'blur', min: 1, max: 60 }
        ],
        dictOperatorName: [{ required: true, message: '请选择所属运营商', trigger: 'blur' }],
        channelCompanyId: [{ required: true, message: '请选择所属通道', trigger: 'blur' }],
        singleCardMeal: [
          { required: true, message: '请输入共享套餐', trigger: 'blur' },
          { pattern: /^(([1-9][0-9]*)|(([0]\.\d{0,1}|[1-9][0-9]*\.\d{0,1})))$/, message: '请输入数字,精确到小数点后一位', trigger: 'blur' }
        ],
        cardNumberStart:[
          { required: true, message: '请输入该号段', trigger: 'blur' }
        ],
        cardNumberEnd:[
          { required: true, message: '请输入该号段', trigger: 'blur' }
        ]

      }
    }
  },
  created() {
    this.initData()
  },

  methods: {
    fileChangeHandle() {
      this.fileList.file = ''
      this.fileList.file = this.$refs.file.files[0]
      this.form.fileName = this.$refs.fileName.$el.innerText = this.$refs.file.files[0].name
      if (this.form.fileName.split('.').pop().toLowerCase() != 'xls'
          && this.form.fileName.split('.').pop().toLowerCase() != 'xlsx') {
        this.$message({ message: '请上传正确的EXCEL', type: 'error' })
      }
      //console.log(this.fileList.file)
    },
    toBack() {
      this.$router.back(-1)
    },
    async initData() {
      const returnData = await getChannelcompanyForSelect({})
      if (returnData._result) {
        returnData.data.map(item => {
          this.form.dictOperatorNameSelect.push(item.dictOperatorName)
          this.form.channelCompanyIdSelect.push({ id: item.id, name: item.operatorBranch })
        })
      }
    },
    submitPrimaryFlowPoolHandle(form) {
      this.form.mealSpec = ''
      let mb=0;
      if (this.form.unit === 'G') {
        mb = this.form.singleCardMeal * 1024
      }else{
        mb = this.form.singleCardMeal
      }
      this.$refs[form].validate(async valid => {

        if (valid ) {
          if (this.form.dictOperatorName === '电信') {
            this.dictOperator = 'TELECOM'
          }
          if (this.form.dictOperatorName === '移动') {
            this.dictOperator = 'MOBILE'
          }
          if (this.form.dictOperatorName === '联通') {
            this.dictOperator = 'UNICOM'
          }
          const returnData = await submitPrimaryFlowPool({
            flowPoolName: this.form.flowPoolName, // 流量池名称
            dictOperator: this.dictOperator, // 所属运营商
            singleCardMeal: mb, // 共享套餐
            theoryFlow: this.form.theoryFlow, // 理论流量
            containsFlow: this.form.containsFlow, // 实际流量
            virtualUsedFlow: this.form.virtualUsedFlow, // 虚出流量
            channelCompanyId: this.form.channelCompanyId, // 所属通道
            cardNumber: this.form.cardNumber, // 挂卡数量
            file: this.fileList.file,
            cardNumberStart:this.form.cardNumberStart,
            cardNumberEnd:this.form.cardNumberEnd
          })
          if (returnData._result) {
            this.$router.back(-1)
            this.$message({ message: '流量池添加成功', type: 'success' })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .box-card {
    width: 666px;
    margin: 70px auto;
  }
  .file_upload_box {
    display: inline-block;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
  }
  .file_upload_box input[type=file] {
    position: absolute;
    left: 0;
    top: 6px;
    width: 100%;
    line-height: 25px;
    opacity: 0;
    cursor: pointer;
  }
  .file_upload_box a {
    display: inline-block;
    width: 100%;
    line-height: 25px;
    text-align: center;
    font-family: "Microsoft yahei";
    background-color: #315baf;
    color: #FFF;
    font-weight: 700;
    text-decoration: none;
  }
  .file_upload_box /deep/ a {
    cursor: default;
  }
  .excel {
    cursor: default;
    display: inline-block;
    width: 50%;
    height: 25px;
    line-height: 0px;
    text-align: center;
    font-family: "Microsoft yahei";
    background-color: #315baf;
    color: #FFF;
    font-weight: 700;
    text-decoration: none;
  }
  .active {
    background: white;
    color: black;
    width: 100%;
    border: none;
    padding: 0;
  }
  .isl{
    width:80px;
  }
</style>
<!--el-col(:xl="{ span: 20, push: 2 }")-->
<!--el-form-item(label="理论流量" label-width="110px" prop="theoryFlow")-->
<!--el-input(size="small" style="width: 100%;" v-model="form.theoryFlow")-->
<!--el-col(:xl="{ span: 20, push: 2 }")-->
<!--el-form-item(label="实际流量" label-width="110px" prop="containsFlow")-->
<!--el-input(size="small" style="width: 100%;" v-model="form.containsFlow")-->
<!--el-col(:xl="{ span: 20, push: 2 }")-->
<!--el-form-item(label="虚出流量" label-width="110px" prop="virtualUsedFlow")-->
<!--el-input(size="small" style="width: 100%;" v-model="form.virtualUsedFlow")-->
<!--el-col(:xl="{ span: 20, push: 2 }")-->
<!--el-form-item(label="挂卡数量" label-width="110px" prop="cardNumber")-->
<!--el-input(size="small" style="width: 100%;" v-model="form.cardNumber")-->
